<template>
  <div>
    <h1>hello world</h1>
    <!-- 通过a链接，会刷新 页面 走服务端渲染 -->
    <a href="/about">666</a>
    <!-- 通过 nuxt link 不刷新 走客户端渲染-->
    <nuxt-link to="/about">nuxt-link</nuxt-link>
    <!-- 编程式导航 同上 -->
    <button @click="toabout">编程式</button>
    <h2>user</h2>
    <nuxt-link to="/user/2">nuxt-link</nuxt-link>
    <nuxt-link to="/user/name">nuxt-link</nuxt-link>

    <h1>asyncData</h1>
    <Foo :users="users" />
  </div>
</template>

<script>
import axios from "axios";
import Foo from '../component/Foo';

export default {
  name: "HomePage",
  // 这个是在服务端运行去请求数据的 到客户端已经有这些数据了
  // 只能在 pages 中的组件使用
  // 只有首屏是服务端请求 以后通过路由跳到这个组件 就都是客户端请求了
  // asyncData 是没有this 的 因为他是服务端运行的 发生在组件渲染之前
  async asyncData() {
    const res = await axios({
      method: 'GET',
      url: 'http://localhost:3000/lanpang/data.json'
    });
    return res.data;
  },
  components: {
    Foo
  },
  data() {
    return {
      person: 'wang'
    }
  },
  methods: {
    toabout() {
      this.$router.push("/about");
    },
  },
};
</script>